<template>
  <view class="main">
    <img src="@assets/images/logo.png" alt="logo" class="logo">
    <view class="cell">
      <input type="text" class="name" v-model="info.userName" placeholder="用户名">
    </view>
    <view class="cell">
      <input type="password" class="password" v-model="info.passWord" placeholder="密码">
    </view>
    <button type="warn" @click="login" class="login" :loading="loginLoading">登录</button>
    <button @click="register" class="register">注册</button>
  </view>
</template>

<script>
import {Login} from './login'
import {CheckUtils, DeviceUtils} from 'js-common-utils'

export default {
  data() {
    return {
      info: new Login('18665876759', 'ling13599279107'),
      loginLoading: false,
    };
  },
  methods: {
    login() {
      try {
        CheckUtils.check('empty', this.info.userName, '请输入用户名')
        CheckUtils.check('empty', this.info.passWord, '请输入密码')
      } catch (e) {
        console.log(e)
        this.$toast(e.message)
      }
      this.$api.login({
        phone: this.info.userName,
        password: this.info.passWord
      })
    },
    register() {
      uni.navigateTo({
        url: '/pages/login/register'
      })
    },
  }
}
</script>

<style lang="scss">
.main {
  padding: 30px;

  .logo {
    width: 300px;
    margin: 60px 0 60px calc(50% - 150px);
  }

  .cell {
    width: 670px;
    margin-left: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;

    text {
      width: 140px;
      margin-right: 20px;
      font-size: 32px;
    }

    input {
      flex: 1;
      padding: 32px 0;
      border-bottom: 1px solid #EFEFEF;
    }
  }

  .login {
    width: 670px;
    height: 88px;
    border-radius: 12px;
    font-size: 34px;
    background-color: rgb(212, 60, 51);
    margin-bottom: 20px;
    margin-top: 60px;
  }

  .register {
    width: 670px;
    height: 88px;
    border-radius: 12px;
    font-size: 34px;
  }
}
</style>
